import React from "react"
import 'antd/dist/antd.css';
import { Input,Button,List } from 'antd';
//当一个组件里面只有render函数时,可以将这个UI组件修改为无状态组件(无状态组件:性能比较高)

//注意:无状态组件中不能使用ref
const TodolistUi = (props)=>{
    return (
        <div>
            <Input placeholder="请输入你的内容~" onChange={ (e)=> props.inpChange(e) } value={props.inpValue} style={ {width: '30%',margin:'20px'} }/>
            <Button type="primary" onClick={()=>props.sub(props.inpValue)}>提交</Button>
            {/* 点击每一个列表实现删除 */}
            <List
            bordered
            dataSource={props.list}
            renderItem={(item,index) => (<List.Item onClick={(index)=>props.del(index)} key={index}>{item}</List.Item>)}
            />
        </div>
    )
}
export default TodolistUi;
// export default class TodolistUi extends React.Component {
//     render (){
//         return (
//             <div>
//                 <Input placeholder="请输入你的内容~" onChange={ (e)=> this.props.inpChange(e) } value={this.props.inpValue} style={ {width: '30%',margin:'20px'} } ref="inp" />
//                 <Button type="primary" onClick={()=>this.props.sub(this.props.inpValue)}>提交</Button>
//                 {/* 点击每一个列表实现删除 */}
//                 <List
//                 bordered
//                 dataSource={this.props.list}
//                 renderItem={(item,index) => (<List.Item onClick={(index)=>this.props.del(index)} key={index}>{item}</List.Item>)}
//                 />
//             </div>
//         )
//     }
// }